import React, { useState, useEffect } from 'react'
import { Link, useHistory } from 'react-router-dom'

export default function NotFound() {
  const history = useHistory()
  const [time, setTime] = useState(3)
  //   const timeRef = useRef(-1)
  //   useEffect(() => {
  //     let timer = setInterval(() => {
  //       setTime((time) => {
  //         timeRef.current = time - 1
  //         return time - 1
  //       })
  //       if (timeRef.current === 0) {
  //         clearInterval(timer)
  //         history.push('/home')
  //       }
  //     }, 1000)
  //   }, [history])

  useEffect(() => {
    // if (time === 0) {
    //   history.push('/home')
    // } else {
    //   setTimeout(() => {
    //     setTime(time - 1)
    //   }, 1000)
    // }
    let timer = setTimeout(() => {
      setTime(time - 1)
    }, 1000)
    if (time === 0) {
      clearTimeout(timer)
      history.push('/home')
    }
  }, [time, history])

  //   useEffect(() => {
  //     let timer = setTimeout(() => {
  //       setTime(time - 1)
  //     }, 1000)
  //     if (time === 0) {
  //       history.push('/home')
  //     }
  //     return () => {
  //       clearTimeout(timer)
  //     }
  //   })
  return (
    <div>
      <h1>对不起，你访问的内容不存在...</h1>
      <p>
        {time} 秒后，返回<Link to="/home">首页</Link>
      </p>
    </div>
  )
}
